<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>

    <link rel="stylesheet" href="../css/bootstrap-3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/jquery.treegrid.css">
</head>
<body>
<table id="tb" style="width: 80%;margin-top: 100px" align="center" ></table>
</body>
<script type="text/javascript" src="../js/jquery-2.2.4.js"></script>
<script type="text/javascript" src="../js/jquery.treegrid.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jquery.treegrid.bootstrap3.js"></script>
<script type="text/javascript" src="../js/jquery.treegrid.extension.js"></script>
<script type="text/javascript">
    $('#tb').treegridData({
        id: 'id',
        parentColumn: 'pid',
        type: "GET", //请求数据的ajax类型
        url: '../json/treegrid.json',   //请求数据的ajax的url
        ajaxParams: {}, //请求数据的ajax的data属性
        expandColumn: null,//在哪一列上面显示展开按钮
        striped: true,   //是否各行渐变色
        bordered: true,  //是否显示边框
        //expandAll: false,  //是否全部展开
        columns: [
            {
                title: '机构名称',
                field: 'name'
            },
            {
                field: '',
                title: '序号',
                formatter: '1'
            },
            {
                title: '机构描述',
                field: 'permissionValue'
            }
        ]
    });
//    $(document).ready(function() {
//        $('.tree').treegrid({
//            expanderExpandedClass: 'glyphicon glyphicon-minus',
//            expanderCollapsedClass: 'glyphicon glyphicon-plus'
//        });
//    });

</script>
</html>